<template>
  <div class="serialize-view">
    <div class="icon">
      <i class="icon-search"></i>
    </div>
    <wd-tabs
      v-model="tab"
      swipeable
      @change="changeTab"
    >
      <wd-tab
        v-for="d in dateTime"
        :key="d"
        :title="`${d}`"
        :name="`${d}`"
      >
        <SerializeArticleView
          v-for="y in yearList"
          :key="y.id"
          :yearlist="y"
        ></SerializeArticleView>
        <wd-loading
          color="#000000"
          v-if="loading"
          class="loading"
        ></wd-loading>
      </wd-tab>

    </wd-tabs>

    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { debounce } from "lodash-es";
// import SerializeViewNav from "./SerializeViewNav";
import SerializeArticleView from "./SerializeArticleView";
export default {
  name: "SerializeView",
  props: {
    year: Number,
  },
  data() {
    return {
      loading: true,
      tab: 0,
      dateTime: [],
      yearList: [],
      nowYear: new Date().getFullYear(),
    };
  },
  created() {
    // this.getYearSerialList();
    this.getYearSerialList = debounce(this.getYearSerialList);
  },
  mounted() {
    let date = new Date().getFullYear();
    let dateArr = [];
    for (var i = date; i >= date - 6; i--) {
      dateArr.push(i);
    }
    this.dateTime = dateArr;
    this.getYearSerialList();
  },
  methods: {
    // setYear(year) {
    //   this.nowYear = year;
    //   console.log(this.nowYear);
    //   this.getYearSerialList();
    // },
    changeTab(i, n) {
      // console.log(`${i}+${n}`);
      this.nowYear = n;
      this.getYearSerialList();
    },
    // 获取年度文章列表
    async getYearSerialList() {
      let { data } = await this.$axios(
        ` https://apis.netstart.cn/one/find/serial/byyear/${this.nowYear}`
      );
      // console.log(data);
      this.yearList = data.data;
      this.$nextTick(() => {
        this.loading = false;
      });
    },
  },

  components: {
    // SerializeViewNav,
    SerializeArticleView,
  },
};
</script>

<style lang="scss" scoped>
.serialize-view {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;

  .icon {
    position: fixed;
    top: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 42px;
    background-color: #fff;
    z-index: 2;

    .icon-search {
      display: block;
      width: 20px;
      height: 20px;
      background-image: url("../../assets/img/discover_icon_search.png");
      background-repeat: no-repeat;
      background-size: cover;
      // background-color: #fff;
    }
  }
}
.loading {
  margin: 10px auto;
}
</style>
